<template>
    <!--pages/search-page/search-page.wxml-->
    <view class="container">

        <!-- 搜索框 -->
        <view class="search-bar">
            <view class="search-box">
                <input :value="prodName" @confirm="toSearchProdPage" @input="getSearchContent" class="sear-input"
                       confirm-type="search" placeholder="输入关键字搜索"></input>
                <image class="search-img" src="/static/images/icon/search.png"></image>
            </view>
            <text @tap="goBackIndex" class="search-hint">取消</text>
        </view>

        <view class="search-display">
            <!-- 热门搜索 -->
            <view class="hot-search">
                <view class="title-text">
                    热门搜索
                </view>
                <view class="hot-search-tags" v-if="hotSearchList && hotSearchList.length">
                    <block :key="index" v-for="(item, index) in hotSearchList">
                        <text :data-name="item.content" @tap="onHistSearch" class="tags">{{item.title}}</text>
                    </block>
                </view>
                <view class="search-tit-empty" v-else>暂无数据</view>

            </view>

            <!-- 搜索历史 -->
            <view class="history-search" v-if="recentSearch && recentSearch.length">
                <view class="title-text history-line">
                    搜索历史
                    <view class="clear-history">
                        <image @tap="clearSearch" src="/static/images/icon/clear-his.png"></image>
                    </view>
                </view>
                <block :key="index" v-for="(item, index) in recentSearch">
                    <view class="his-search-tags">
                        <text :data-name="item" @tap="onHistSearch" class="tags">{{item}}</text>
                    </view>
                </block>
            </view>
        </view>
    </view>
</template>

<script>
    // pages/search-page/search-page.js
    var http = require("../../utils/http.js");

    export default {
        data() {
            return {
                hotSearchList: [],
                prodName: "",
                recentSearch: []
            };
        },

        components: {},
        props: {},

        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
        },

        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function () {
        },

        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function () {
            var ths = this; //热门搜索

            var params = {
                url: "/search/hotSearchByShopId",
                method: "GET",
                data: {
                    number: 10,
                    shopId: 1,
                    sort: 1
                },
                callBack: function (res) {
                    ths.setData({
                        hotSearchList: res
                    });
                }
            };
            http.request(params); // 获取历史搜索

            this.getRecentSearch();
        },

        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function () {
            this.prodName = ''
        },

        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function () {
        },

        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function () {
        },

        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function () {
        },

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function () {
        },
        methods: {
            /**
             * 获取历史搜索
             */
            getRecentSearch: function () {
                let recentSearch = uni.getStorageSync('recentSearch');
                this.setData({
                    recentSearch
                });
            },

            /**
             * 搜索提交
             */
            toSearchProdPage: function () {
                if (this.prodName.trim()) {
                    // 记录最近搜索
                    let recentSearch = uni.getStorageSync('recentSearch') || [];
                    recentSearch = recentSearch.filter(item => item !== this.prodName);
                    recentSearch.unshift(this.prodName);

                    if (recentSearch.length > 10) {
                        recentSearch.pop();
                    }

                    uni.setStorageSync('recentSearch', recentSearch); // 跳转到商品列表页

                    uni.navigateTo({
                        url: '/pages/search-prod-show/search-prod-show?prodName=' + this.prodName
                    });
                }
            },

            /**
             * 清空搜索历史
             */
            clearSearch: function () {
                uni.removeStorageSync('recentSearch');
                this.getRecentSearch();
            },
            // 返回首页
            goBackIndex: function () {
                uni.navigateBack({// url: '/pages/search-page/search-page',
                });
            },
            //输入商品名获取数据 || 绑定输入值
            getSearchContent: function (e) {
                this.setData({
                    prodName: e.detail.value
                }); // this.data.prodName=e.detail.value
            },
            //点击搜素历史
            onHistSearch: function (e) {
                var name = e.currentTarget.dataset.name;
                this.setData({
                    prodName: name
                });
                this.toSearchProdPage();
            }
        }
    };
</script>
<style>
    @import "./search-page.css";
</style>
